import { Modal } from "antd";

import { createElement } from "react";
import { createRoot } from 'react-dom/client';

const Wrap = (component) => {
  const distoryDialog = (root) => {
    if (root) {
      setTimeout(() => {
        root.unmount();
      }, 600);
    }
  }

  return (config) => {
    const dom = document.createElement('div');
    let root = createRoot(dom);
    // 定义一个jsx组件
    let jsxComponent = createElement(component, {
      ...config,
      visiable: true,
      closeDialog: () => {
        distoryDialog(root);
      }
    })

    // 渲染组件
    root.render(jsxComponent);
  }
}

const MyModal = (props) => {

  console.log(props);

  const okHandler = () => {
    props.onOk();
    props.closeDialog();
  }

  return (
    <Modal
      title={props.title}
      open={props.visiable}
      onOk={okHandler}
      onCancel={props.closeDialog}
      okText={props.okText}
    >
      <div style={{ marginTop: '40px', marginRight: '40px' }}>
        {props.children()}
      </div>
    </Modal>
  )
}

export default Wrap(MyModal);